<template>
	<view>
		<uv-sticky>
			<view class="order-header" v-if="isLoginType==2">
				<uv-tabs :current="current" lineWidth="30" lineColor="#60bcbb"
					:activeStyle="{color: '#60bcbb',fontWeight: 'bold'}" :list="list" @click="click"
					:scrollable="false"></uv-tabs>
			</view>
			<view class="order-header" v-if="isLoginType==1">
				<uv-tabs lineWidth="30" lineColor="#60bcbb" :activeStyle="{color: '#60bcbb',fontWeight: 'bold'}"
					:list="list2" @click="click" :scrollable="false"></uv-tabs>
			</view>
		</uv-sticky>
		<view style="height: 120rpx;"></view>
		<view class="order-list">
			<template v-if="dataList.length">
				<view class="order-item" v-for="(item,i) in dataList" :key="i">
					<view class="order-item-top flex-between" @click="gotoDetails(item)">
						<view class="order-bh">订单号：{{item.orderNo}}</view>
						<view class="order-status" v-if="isLoginType==1">
							<!-- 技师登陆后显示的状态 -->
							<template v-for="(v,j) in statusList" :key="j">
								<text v-if="item.status==v.value">{{v.text1}}</text>
							</template>
						</view>
						<view class="order-status" v-if="isLoginType==2">
							<template v-for="(v,j) in statusList" :key="j">
								<text v-if="item.status==v.value">{{v.text}}</text>
							</template>
						</view>
					</view>
					<view class="good-item flex-y-center" @click="gotoDetails(item)">
						<view class="good-image">
								<!-- <uv-image :src="infoData.avatarPath" width="72px" height="72px" shape="circle"></uv-image> -->
							<uv-image :src="item.ossServicePath" mode="aspectFill" width="77px" height="77px"></uv-image>
						</view>
						<view class="good-cont flex-grow-1">
							<view class="good-name">
								{{item.serviceName}}
							</view>
							<view class="price">
								￥{{item.orderPrice}}
							</view>
						</view>
						<view class="number">x1</view>
					</view>
					<view class="amount">
						合计：￥{{item.orderPrice}}
					</view>
					<view class="order-foot">
						<button class="btn btn1" @click="callPhone(item)">{{isLoginType==2?'联系店家':'联系客户'}}</button>
						<button class="btn btn1" v-if="isLoginType==2&&item.status==0"
							@click="modifyOrder(item.orderId,4)">取消预约</button>
						<button class="btn" v-if="isLoginType==2&&item.status==0"
							@click="gotoCode(item.verificationCode)">到店使用</button>
							<button class="btn" v-if="isLoginType==1&&item.status==0"
							@click="Scanthecode(item.orderId)">扫码核销</button>
							<button class="btn" v-if="isLoginType==1&&item.status==1"
							@click="modifyOrder(item.orderId,2)">确认服务</button>
						<!-- 技师去评价 -->
						<button class="btn btn1" v-if="isLoginType==1&&item.isJsEvaluate=='0'&&item.status>2"
							@click="gotoevaluate(item)">去评价</button>
						<!-- 用户去评价 -->
						<button class="btn btn1" v-if="isLoginType==2&&item.status>1&&item.isUserEvaluate=='0'"
							@click="gotoevaluate(item)">去评价</button>
						<button class="btn" v-if="isLoginType==1&&item.status==2"
							@click="modifyOrder(item.orderId,3)">结束服务</button>
					</view>
				</view>
			</template>
			<noEmpty v-else />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				freshing: true,
				list: [
				// 	{
				// 	name: '全部',
				// 	status: null,
				// },
				{
					name: '待使用',
					status: 0,
				}, {
					name: '待服务',
					status: 1,
				}, {
					name: '服务中',
					status: 2,
				}, {
					name: '已完成',
					status: 3,
				}, {
					name: '待评价',
					status: 4,
				}],
				list2: [
				// 	{
				// 	name: '全部',
				// 	status: null,
				// },  
				{
					name: '待核销',
					status: 0,
				},{
					name: '待服务',
					status: 1,
				}, {
					name: '服务中',
					status: 2,
				}, {
					name: '已完成',
					status: 3,
				}, {
					name: '待评价',
					status: 4,
				}],
				isLoginType: 2, //0用户登陆，1技师登录后
				dataList: [],
				userInfo: {},
				status: null,
				evaluateType: null,
				statusList: [
					{
						value: 0,
						text: "已预约",
						text1: '待核销'
					},
					{
						value: 1,
						text: "待服务",
						text1: '待服务'
					},
					{
						value: 2,
						text: "服务中",
						text1: '服务中'
					},
					{
						value: 3,
						text: "已完成",
						text1: '已完成'
					},
					{
						value: 4,
						text: "已取消",
						text1: '已取消'
					},
				],
				current: 0,
				jsEvaluateType: null, //待评价
				userEvaluateType: null, //待用户评价
			}
		},
		onLoad(option) {
			this.current = option.current
		
		},
		onShow() {
			this.isLoginType = this.$store.state.isLoginType
			this.userInfo = this.$store.state.userInfo
			setTimeout(()=>{
				this.click({
					index: this.current
				})
			},100)
		},
		mounted() {},
		methods: {
			async getList() {
				if (this.isLoginType == 1) {
					console.log(this.userInfo.user.userId)
					const {
						code,
						data
					} = await this.muajax.orderList({
						userId: this.userInfo.user.userId,
						status: this.status,
						jsEvaluateType: this.jsEvaluateType ? this.jsEvaluateType : ''
					});
					this.dataList = data
				} else if (this.isLoginType == 2) {
					const {
						code,
						data
					} = await this.muajax.orderList({
						appUserId: this.userInfo.appUserId,
						status: this.status,
						userEvaluateType: this.userEvaluateType
					});
					this.dataList = data
				}

			},

			async modifyOrder(item, num) {
				let title=null
				if(num==2){
					title='是否开始服务？'
				}else if(num==3){
					title='是否结束服务？'
				}else{
					title='是否取消预约？'
				}
				uni.showModal({
					title: '提示',
					content:title,
					success: res => {
						if (res.confirm) {
							this.muajax.modifyOrder({
								orderId: item,
								status: num,
							}).then(data => {
								if (data.code = 200) {
									this.getList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

				console.log(data)
			},
			click(e) {
				console.log(e.index)
				if (e.index == 4) {
					this.jsEvaluateType = 2
					this.userEvaluateType = 2
				} else {
					this.jsEvaluateType = null
					this.userEvaluateType = null
					this.status = this.list2[e.index].status
				}
				this.getList()
			},
			callPhone(item) {
				// 判断店家手机号和商家手机号
				uni.makePhoneCall({
					phoneNumber: this.isLoginType == 2 ? item.phonenumber : item.appPhonenumber
				})
			},
			gotoCode(verificationCode) {
				uni.navigateTo({
					url: '/pages/order/QRcode?verificationCode=' + verificationCode
				})
			},
			gotoevaluate(item) {
				console.log(item)
				if (this.isLoginType == 2) {
					uni.navigateTo({
						url: `/pages/order/order-evaluate?orderId=${item.orderId}&&appUserId=${item.appUserId}&&userId=${item.userId}`
					})
				} else {
					uni.navigateTo({
						url: `/technicianPages/order/order-evaluate?orderId=${item.orderId}&&appUserId=${item.appUserId}&&userId=${item.userId}`
					})
				}

			},
			// 扫码核销
			Scanthecode(orderId) {
				uni.scanCode({
					onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择
					scanType: ['qrCode', 'barCode'], // 扫码类型，可以指定二维码、条形码等
					success: (res) => {
						console.log('扫码结果:', res.result);
						this.submitverificationCode(orderId, res.result)
					},
					fail: (err) => {
						console.error('扫码失败:', err);
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						});
					}
				});
			},
			//核销订单
			async submitverificationCode(orderId, verificationCode) {
				let res = await this.muajax.verificationCode({
					verificationCode,
					orderId
				});
				if (res.code == 200) {
					this.getList()
				}
			},

			// 跳转详情
			gotoDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/order/orderDetails?orderId=${item.orderId}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.order-header {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 999;
		background: #fff;
	}

	.order-item {
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.order-foot {
			display: flex;
			background: #fff;
			height: 120rpx;
			align-items: center;
			box-sizing: border-box;
			justify-content: flex-end;
			// justify-content: right;
			border-top: 1px solid #f1f1f1;
			margin-top: 20rpx;

			.btn {
				height: 61rpx;
				background-color: #00c6c3;
				border-radius: 30rpx;
				text-align: center;
				line-height: 61rpx;
				color: #fff;
				margin: 0px;
				margin-left: 20rpx;
				transition: all 0.3s;
				opacity: 0.8;

				&::after {
					border: none;
				}

				&:hover,
				&:active {
					opacity: 1;
				}
			}

			.btn1 {
				border: 1px solid #f1f1f1;
				background: none;
				color: #666666;
				line-height: 59rpx;

				&:hover,
				&:active {
					border: 1px solid #00c6c3;
					color: #00c6c3;
					background: none;
				}
			}

		}

		.order-status {
			color: #ff5f00;
		}

		.amount {
			color: #ff5f00;
			text-align: right;
		}
	}

	.good-item {
		margin: 20rpx 0px;
		padding: 20rpx 30rpx;
		background: #fff;

		.good-image {
			width: 144rpx;
			height: 144rpx;
			margin-right: 35rpx;
			overflow: hidden;
			flex-grow: 0;
			flex-shrink: 0;
		}

		.good-name {
			font-size: 32rpx;
			margin-bottom: 45rpx;

		}

		.number {
			color: #666666;
			font-size: 36rpx;
		}

		.price {
			color: #666666;
		}
	}
</style>